import { html, PageComponent, reactive } from 'nvagir'
import './Register.less'

/**
 * @template userData save User information
 */
type UserData = {
  password: string
  nickname: string
  email: string
  check: string
}

/**
 * register page layout and personal data transfer
 * @param regnick nickname form regular expression
 * @param regEmail Email form regular expression
 * @param regpass password form regular expression
 */
const Register: PageComponent = () => {
  let regnick = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
  let regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
  let regpass = /^[a-zA-Z]\w{5,17}$/

  /**
   * saving register userData
   */
  const data: UserData = {
    password: '',
    nickname: '',
    email: '',
    check: '',
  }

  /**
   * This is for submit register-user information
   */
  const handlerConfirm = () => {
    if (
      flag.f1 == true &&
      flag.f2 == true &&
      flag.f3 == true &&
      flag.f4 == true
    ) {
      let Nickname = (<HTMLInputElement>document.querySelector('.nick')).value
      let Email = (<HTMLInputElement>document.querySelector('.email')).value
      let Password = (<HTMLInputElement>document.querySelector('.passWord'))
        .value
      let Check = (<HTMLInputElement>document.querySelector('.check')).value
      console.log('username', Nickname!)
      console.log('email', Email!)
      console.log('password', Password!)
      console.log('check', Check!)
      alert('Created successfully!')
      history.nvagirRouter.push('/playGround')
    } else {
      alert('Input error! Please check again.')
    }
  }

  /**
   * Get register imformation and
   * save it in the formData
   * @template passwordInput Render PegisterForm
   */
  const { el, doms } = html<{
    passwordInput: HTMLInputElement
  }>`
    <div class="register-page">
      <div class="form">
        <form class="register-form" n@submit=${handlerConfirm}>
          <input
            type="text"
            placeholder="name"
            class="nick"
            autocomplete="off"
            name="nick"
            n@blur=${ev => regexp(ev.target! as HTMLInputElement, regnick)}
          />
          <input
            type="text"
            placeholder="email address"
            class="email"
            autocomplete="off"
            name="email"
            n@blur=${ev => regexp(ev.target! as HTMLInputElement, regEmail)}
          />

          <input
            type="password"
            placeholder="password"
            class="passWord"
            autocomplete="off"
            name="password"
            n@blur=${ev => regexp(ev.target! as HTMLInputElement, regpass)}
            n@input=${ev =>
              (data.password = (ev.target! as HTMLInputElement).value)}
          />

          <input
            name="check"
            n@blur=${ev =>
              checkAgain(ev.target! as HTMLInputElement, proxyData.password)}
            type="password"
            placeholder="check password"
            class="check"
            autocomplete="off"
          />
          <button n@click=${handlerConfirm}>create</button>
          <p class="message">
            Already registered?
            <a href="#" n@click=${() => history.nvagirRouter.push('/login')}
              >Sign In</a
            >
          </p>
        </form>
      </div>
    </div>
  `

  /**
   * Verify password correctness
   * @param data saved data
   * @param p keyof userData
   */
  const proxyData = reactive(data, p => {
    switch (p) {
      case 'password':
        //console.log(123)
        doms.passwordInput.pattern = `/^[a-zA-Z]\w{5,17}$/`
        console.log(doms.passwordInput)
    }
  })
  return { el }
}

export default Register
/**
 * Used flag.xx to determine whether the
 * register information is correct
 * @param flag.f1 determine nickname Format
 * @param flag.f2 determine E-mail Format
 * @param flag.f3 determine password Format
 * @param flag.f4 determine password again
 */
let flag = {
  f1: false,
  f2: false,
  f3: false,
  f4: false,
}

/**
 * Check whether the word satisfies the formal form.
 * @param ele: Entered word
 * @param reg: Formal form
 */
function regexp(ele: any, reg: any): void {
  if (reg.test(ele.value)) {
    console.log(ele.value)
    console.log('right')
    ele.style.border = 'none'
    switch (ele.name) {
      case 'nick':
        flag.f1 = true
      case 'email':
        flag.f2 = true
      case 'password':
        flag.f3 = true
    }
  } else {
    console.log('error')
    ele.style.border = '1px solid #EF3B3A'
    switch (ele.name) {
      case 'nick':
        flag.f1 = false
      case 'email':
        flag.f2 = false
      case 'password':
        flag.f3 = false
    }
  }
}

/**
 * Check whether the password is correct.
 * @param ele: Entered password
 * @param reg: setted password
 */
function checkAgain(ele: any, origin: any): void {
  if (origin == ele.value) {
    console.log(ele.value)
    ele.style.border = 'none'
    console.log('right')
    flag.f4 = true
  } else {
    console.log('error')
    ele.style.border = '1px solid #EF3B3A'
    flag.f4 = false
  }
}
